<template>
    <div class="sea-content">
        <div class="opera">
            <Button type="primary" class="save-all" @click="saveAll">暂存</Button>
            <Button v-if="this.saveData.manifestId!=''" type="primary" @click="fsData">发送</Button>
            <Button v-else type="primary" disabled>发送</Button>
            <Button v-if="this.saveData.manifestId!=''" type="primary" @click="sendData">申报</Button>
            <Button v-else type="primary" disabled>申报</Button>
            <Button v-if="this.saveData.manifestId!=''" type="primary" @click="openRecord">查看回执</Button>
            <Button v-else type="primary" disabled>查看回执</Button>
            <Button v-if="this.saveData.manifestId!=''" type="primary" @click="handlePrint">打印</Button>
            <Button v-else type="primary" disabled>打印</Button>
        </div>
        <Form
            ref="seaForm"
            class="sea-form"
            :model="saveData"
            :rules="ruleValidate"
            :label-width="0"
            inline
        >
            <Row class="sea-title">船信息</Row>
            <Row>
                <Col span="2">
                <div class="search-label">
                    <span class="red">*</span>船名
                </div>
                </Col>
                <Col span="4">
                <FormItem label prop="vessel" class="open">
                    <Input
                        class="required"
                        v-model="saveData.vessel"
                        :disabled="Status"
                        placeholder
                    >
                    </Input>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    <span class="red">*</span>航次
                </div>
                </Col>
                <Col span="4">
                <FormItem label prop="voyageNo">
                    <Input v-model="saveData.voyageNo" class="required" :disabled="Status" placeholder />
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    <span class="red">*</span>IMO
                </div>
                </Col>
                <Col span="4">
                <FormItem label prop="imo">
                    <Input :disabled="Status" class="required" v-model="saveData.imo" placeholder />
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    <span class="red">*</span>码头代码
                </div>
                </Col>
                <Col span="4">
                <FormItem label prop="dockCode">
                    <RemoteSearch
                        :disabled="Status"
                        class="required"
                        size="small"
                        placeholder="请选择"
                        v-model="saveData.dockCode"
                        keyword
                        :list="dockCodeList"
                        keywordFiled="dataCode"
                        valueField="dataCode"
                        :labelFieldList="['dataCode', 'dataName']"
                    ></RemoteSearch>
                </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="2">
                <div class="search-label">
                    <span class="red">*</span>船公司
                </div>
                </Col>
                <Col span="4">
                <FormItem
                    label
                    prop="shippingCompany"
                >
                    <Input
                        class="required"
                        :disabled="Status"
                        v-model="saveData.shippingCompany"
                        placeholder
                    />
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    <span class="red">*</span>卸货港
                </div>
                </Col>
                <Col span="4" class="open">
                <FormItem
                    label
                    prop="dischargePort"
                    :rules=" { required: true, message: '', trigger: 'change' }"
                >
                    <Input
                        :disabled="Status"
                        class="required"
                        v-model="saveData.dischargePort"
                        placeholder
                    >
                    <i slot="append" v-if="!Status" @click="openDischargePort()" class="icon ok iconfont icon-more"></i>
                    <i slot="append" v-else @click="openDischargePort()" class="icon dis iconfont icon-more"></i>
                    </Input>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">截关期(参考)</div>
                </Col>
                <Col span="4">
                <FormItem label prop="cutoffTime">
                    <DatePicker
                        :disabled="Status"
                        type="datetime"
                        v-model="saveData.cutoffTime"
                        @on-change="getDate"
                        format="yyyy-MM-dd HH:mm:ss"
                    ></DatePicker>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">备注</div>
                </Col>
                <Col span="4">
                <FormItem label prop="content">
                    <Input :disabled="Status" class v-model="saveData.content" placeholder/>
                </FormItem>
                </Col>
            </Row>
            <Row>
                <span class="sea-title">提单信息</span>
            </Row>
            <Row>
                <Col span="2">
                <div class="search-label">
                    装船单号
                </div>
                </Col>

                <Col span="4">
                <FormItem label prop="shippingNum">
                    <Input :disabled="Status" v-model="saveData.billNo" placeholder/>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    <span class="red">*</span> 订舱单号
                </div>
                </Col>

                <Col span="4">
                <FormItem label prop="bookingNo">
                    <Input :disabled="Status" class="required" v-model="saveData.bookingNo" placeholder/>
                </FormItem>
                </Col>

                <Col span="2">
                <div class="search-label">
                    <span class="red">*</span>通关方式
                </div>
                </Col>
                <Col span="4">
                <FormItem label class="required" prop="clearanceMethod">
                    <RemoteSearch
                        :disabled="Status"
                        placeholder="请选择"
                        v-model="saveData.clearanceMethod"
                        :list="clearanceMethodList"
                        keywordFiled="name"
                        valueField="value"
                        :labelFieldList="['name']"
                    ></RemoteSearch>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    船代
                </div>
                </Col>
                <Col span="4">
                <FormItem label prop="ciId">
                    <Input :disabled="Status" v-model="saveData.ciId" placeholder/>
                </FormItem>
                </Col>

            </Row>

            <Row>
                <Col span="2">
                <div class="search-label">
                    <span class="red">*</span> 贸易方式
                </div>
                </Col>
                <Col span="4">
                <FormItem label class="required" prop="tradeMode">
                    <RemoteSearch
                        :disabled="Status"
                        size="small"
                        placeholder="请选择"
                        v-model="saveData.tradeMode"
                        keyword
                        :list="tradeModeList"
                        keywordFiled="dataName"
                        valueField="dataCode"
                        :labelFieldList="['dataCode', 'dataName']"
                        :secondLabels="['dataSecondType', 'dataThirdType']"
                    ></RemoteSearch>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">是否退税</div>
                </Col>
                <Col span="4">
                <FormItem label prop="isDange">
                    <RemoteSearch
                        :disabled="Status"
                        placeholder="请选择"
                        v-model="saveData.taxRebate"
                        keyword
                        :list="ynList"
                        keywordFiled="name"
                        valueField="value"
                        :labelFieldList="['name']"
                    ></RemoteSearch>
                </FormItem>
                </Col>

                <Col span="2">
                <div class="search-label">转关单号</div>
                </Col>
                <Col span="4">
                <FormItem label prop="turnOffInt">
                    <Input :disabled="Status" v-model="saveData.turnOffInt" placeholder/>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">是否提前申报</div>
                </Col>
                <Col span="4">
                <FormItem label prop="isDeclareInAdvance">
                    <RemoteSearch
                        :disabled="Status"
                        placeholder="请选择"
                        v-model="isDA"
                        keyword
                        :list="yesList"
                        keywordFiled="name"
                        valueField="value"
                        :labelFieldList="['name']"
                    ></RemoteSearch>
                </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="2">
                <div class="search-label">
                    <span class="red">*</span> 货物总件数 <span v-show="noshow">{{totalPackageQuantity}}</span>
                </div>
                </Col>
                <Col span="4">
                <FormItem label prop="totalPackageQuantity">
                    <Input :disabled="Status" class="required" v-model="saveData.totalPackageQuantity" placeholder/>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">包装种类</div><span v-show="noshow">{{packingType}}</span>
                </Col>
                <Col span="4">
                <FormItem label prop="gender">
                    <RemoteSearch
                        :disabled="Status"
                        size="small"
                        placeholder="请选择"
                        v-model="saveData.packingType"
                        keyword
                        :list="packingTypeList"
                        keywordFiled="dataName"
                        valueField="dataCode"
                        :labelFieldList="['dataCode', 'dataName']"
                    ></RemoteSearch>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    <span class="red">*</span> 货物总毛重kg <span v-show="noshow">{{totalGrossMeasure}}</span>
                </div>
                </Col>
                <Col span="4">
                <FormItem label prop="totalGrossMeasure">
                    <Input :disabled="Status" class="required" v-model="saveData.totalGrossMeasure"/>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    <span class="red">*</span>主要商品名称<span v-show="noshow">{{mainGoodsName}}</span>
                </div>
                </Col>
                <Col span="4">
                <FormItem label prop="mainGoodsName">
                    <Input :disabled="Status" class="required" v-model="saveData.mainGoodsName" placeholder/>
                </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="2">
                <div class="search-label">
                    <span class="red">*</span>发货人名称
                </div>
                </Col>
                <Col span="4">
                <FormItem label prop="consignorName">
                    <Input :disabled="Status" class="required" v-model="saveData.consignorName" placeholder/>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    <span class="red">*</span>发货人地址
                </div>
                </Col>
                <Col span="4">
                <FormItem label prop="consignorAddr">
                    <Input :disabled="Status" class="required" v-model="saveData.consignorAddr" placeholder />
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    <span class="red">*</span>发货人
                </div>
                </Col>
                <Col span="1">
                <FormItem label prop="consignorComminicateType">
                    <RemoteSearch
                        :disabled="Status"
                        class="required"
                        placeholder="请选择"
                        style="top:-1px;"
                        v-model="saveData.consignorComminicateType"
                        keyword
                        :list="consignorComminicateTypeList"
                        keywordFiled="name"
                        valueField="value"
                        :labelFieldList="['value', 'name']"
                    ></RemoteSearch>
                </FormItem>
                </Col>
                <Col span="3">
                <FormItem label prop="consignorPhone">
                    <Input :disabled="Status" style="top:0px;" class="required" v-model="saveData.consignorPhone" placeholder />
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    是否无纸化
                </div>
                </Col>
                <Col span="4">
                <FormItem label class="" prop="noPaper">
                    <RemoteSearch
                        :disabled="Status"
                        placeholder="请选择"
                        v-model="noP"
                        keyword
                        :list="yesList"
                        keywordFiled="name"
                        valueField="value"
                        :labelFieldList="['name']"
                    ></RemoteSearch>
                </FormItem>
                </Col>
            </Row>

            <Row>
                <Col span="2">
                <div class="search-label">
                    <span class="red">*</span>收货人名称
                </div>
                </Col>
                <Col span="4">
                <FormItem label prop="consigneeName">
                    <Input
                        :disabled="Status"
                        size="small"
                        class="required"
                        :maxlength="50"
                        v-model="saveData.consigneeName"
                    />
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    <span class="red">*</span>收货人地址
                </div>
                </Col>
                <Col span="4">
                <FormItem label prop="consigneeAddr">
                    <Input :disabled="Status" class="required" v-model="saveData.consigneeAddr" placeholder/>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    <span v-if="!ifNotice" class="red">*</span>收货人
                </div>
                </Col>
                <Col span="1">
                <FormItem
                    label
                    class

                    prop="consigneeComminicateType"
                    :rules=" { required:!ifNotice , message: '', trigger: 'blur' }"
                >
                    <RemoteSearch
                        :disabled="Status"
                        :class="ifNotice?'':'required'"
                        placeholder="请选择"
                        v-model="saveData.consigneeComminicateType"
                        :list="consignorComminicateTypeList"
                        keywordFiled="name"
                        valueField="value"
                        :labelFieldList="['value', 'name']"
                    ></RemoteSearch>
                </FormItem>
                </Col>
                <Col span="3" class>
                <FormItem
                    label
                    prop="consigneePhone"
                    :rules=" { required:!ifNotice , message: '', trigger: 'blur' }"
                >
                    <Input
                        :disabled="Status"
                        size="small"
                        :class="ifNotice?'':'required'"
                        :maxlength="20"
                        v-model="saveData.consigneePhone"
                    />
                </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="2">
                <div class="search-label">
                    <span v-if="ifNotice" class="red">*</span>通知人
                </div>
                </Col>
                <Col span="1">
                <FormItem
                    label
                    class="small-input open"
                    prop="notifyCodeType"
                    :rules=" { required: ifNotice, message: '', trigger: 'blur' }"
                >
                    <Input
                        :disabled="Status"
                        :class="ifNotice?'required':''"
                        v-model="saveData.notifyCodeType"
                        placeholder
                        @click.native="openNotifyCodeType"
                    >
                    <!--<i slot="append" class="icon iconfont icon-more"></i>-->
                    </Input>
                </FormItem>
                </Col>
                <Col span="3">
                <FormItem
                    label
                    prop="notifyCode"
                    :rules=" { required: ifNotice, message: '', trigger: 'blur' }"
                >
                    <Input
                        :class="ifNotice?'required':''"
                        :disabled="ifNotice?false:true"
                        v-model="saveData.notifyCode "
                        placeholder
                    />
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    <span v-if="ifNotice" class="red">*</span>通知人名称
                </div>
                </Col>
                <Col span="4">
                <FormItem
                    label
                    prop="notifyName"
                    :rules=" { required: ifNotice, message: '', trigger: 'blur' }"
                >
                    <Input
                        :class="ifNotice?'required':''"
                        :disabled="ifNotice?false:true"
                        v-model="saveData.notifyName"
                        placeholder
                    />
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    <span v-if="ifNotice" class="red">*</span>通知人地址
                </div>
                </Col>
                <Col span="4">
                <FormItem
                    label
                    prop="notifyEmail"
                    :rules=" { required: ifNotice, message: '', trigger: 'blur' }"
                >
                    <Input
                        :disabled="ifNotice?false:true"
                        :class="ifNotice?'required':''"
                        v-model="saveData.notifyEmail"
                        placeholder
                    />
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    <span v-if="ifNotice" class="red">*</span>通知人
                </div>
                </Col>
                <Col span="1">
                <FormItem
                    label
                    class="small-input"
                    prop="notifyComminicateType"
                    :rules=" { required: ifNotice, message: '', trigger: 'blur' }"
                >
                    <RemoteSearch
                        :disabled="Status"
                        :class="ifNotice?'required':''"
                        placeholder="请选择"
                        v-model="saveData.notifyComminicateType "
                        keyword
                        :list="consignorComminicateTypeList"
                        keywordFiled="name"
                        valueField="value"
                        :labelFieldList="['value', 'name']"
                    ></RemoteSearch>
                </FormItem>
                </Col>
                <Col span="3" class="no-label">
                <FormItem
                    label
                    prop="notifyPhone"
                    :rules=" { required: ifNotice, message: '', trigger: 'blur' }"
                >
                    <Input
                        :disabled="ifNotice?false:true"
                        :class="ifNotice?'required':''"
                        v-model="saveData.notifyPhone"
                        placeholder
                    />
                </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="2">
                <div class="search-label">
                    <span v-if="ifNotice" class="xred">*</span>通知人国家代码
                </div>
                </Col>
                <Col span="4">
                <FormItem
                    label
                    prop="notifyCountryCode"
                    :rules=" { required: ifNotice, message: '', trigger: 'blur' }"
                >
                    <RemoteSearch
                        :disabled="Status || !this.ifNotice"
                        placeholder="请选择"
                        v-model="saveData.notifyCountryCode"
                        keyword
                        :list="countryList"
                        keywordFiled="dataName"
                        valueField="dataCode"
                        :labelFieldList="['dataCode', 'dataName']"
                        :class="ifNotice?'required':''"
                    ></RemoteSearch>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    <span v-if="!ifNotice" class="xred">*</span>收货人国家代码
                </div>
                </Col>
                <Col span="4">
                <FormItem
                    label
                    prop="consigneeCountryCode"
                    :rules=" { required: !ifNotice, message: '', trigger: 'blur' }"
                >
                    <RemoteSearch
                        :disabled="Status"
                        :class="!this.ifNotice?'required':''"
                        placeholder="请选择"
                        v-model="saveData.consigneeCountryCode"
                        keyword
                        :list="countryList"
                        keywordFiled="dataName"
                        valueField="dataCode"
                        :labelFieldList="['dataCode', 'dataName']"
                    ></RemoteSearch>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">发货人AEO编码</div>
                </Col>
                <Col span="4">
                <FormItem label prop="consignorAeoCode">
                    <Input :disabled="Status" v-model="saveData.consignorAeoCode" placeholder/>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">收货人AEO编码</div>
                </Col>
                <Col span="4">
                <FormItem label prop="consigneeAeoCode">
                    <Input :disabled="Status" v-model="saveData.consigneeAeoCode" placeholder/>
                </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="2">
                <div class="search-label">是否危险品</div>
                </Col>
                <Col span="4">
                <FormItem label prop="isDange">
                    <RemoteSearch
                        :disabled="Status"
                        placeholder="请选择"
                        v-model="isD"
                        keyword
                        :list="yesList"
                        keywordFiled="name"
                        valueField="value"
                        :labelFieldList="['name']"
                    ></RemoteSearch>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    <span v-if="isD==true" class="xred">*</span>危险品联系姓名
                </div>
                </Col>
                <Col span="4">
                <FormItem
                    label
                    prop="dangercontactName"
                    :rules=" { required: isD==true, message: '', trigger: 'blur' }"
                >
                    <Input
                        :disabled="Status"
                        :class="isD==true?'required':''"
                        v-model="saveData.dangercontactName"
                        placeholder
                    />
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">
                    <span v-if="isD==true" class="xred">*</span>危险品联系电话
                </div>
                </Col>
                <Col span="4">
                <FormItem
                    label
                    prop="dangercontactPhone"
                    :rules=" { required: isD==true, message: '', trigger: 'blur' }"
                >
                    <Input
                        :disabled="Status"
                        :class="isD==true?'required':''"
                        v-model="saveData.dangercontactPhone"
                        placeholder
                    />
                </FormItem>
                </Col>

            </Row>

            <Row>
                <span class="sea-title">其他信息</span>
                <Checkbox
                    :disabled="Status"
                    v-model="saveData.portSecurityPremium"
                    :true-value="trueValue"
                    :false-value="falseValue"
                >自交港建安保费</Checkbox>
            </Row>
            <Row class="sea-js">
                <Col span="2">
                <div class="search-label">运输条款</div>
                </Col>
                <Col span="4">
                <FormItem label prop="conditionCode">
                    <RemoteSearch
                        :disabled="Status"
                        placeholder="请选择"
                        v-model="saveData.conditionCode "
                        keyword
                        :list="conditionCodeList"
                        keywordFiled="name"
                        valueField="value"
                        :labelFieldList="['name']"
                    ></RemoteSearch>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">运费支付方式</div>
                </Col>
                <Col span="4">
                <FormItem label prop="pay">
                    <RemoteSearch
                        :disabled="Status"
                        placeholder="请选择"
                        v-model="saveData.freightPaymentMethods"
                        keyword
                        :list="payList"
                        keywordFiled="name"
                        valueField="value"
                        :labelFieldList="['name']"
                    ></RemoteSearch>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">转关目的地</div>
                </Col>
                <Col span="4">
                <FormItem label prop="turnOffDestination">
                    <RemoteSearch
                        :disabled="Status"
                        placeholder="请选择"
                        v-model="saveData.turnOffDestination "
                        keyword
                        :list="turnOffDestinationList"
                        keywordFiled="value"
                        valueField="value"
                        :labelFieldList="['value', 'name']"
                    ></RemoteSearch>
                </FormItem>
                </Col>
                <Col span="2">
                <div class="search-label">货物通关状态</div>
                </Col>
                <Col span="4">
                <FormItem label prop="cargoClearanceCode">
                    <RemoteSearch
                        :disabled="Status"
                        placeholder="请选择"
                        v-model="saveData.cargoClearanceStatus"
                        keyword
                        :list="cargoClearanceCodeList"
                        keywordFiled="name"
                        valueField="value"
                        :labelFieldList="['value', 'name']"
                    ></RemoteSearch>
                </FormItem>
                </Col>
            </Row>
            <Row class="sea-title h50">
                <Col span="12">集装箱信息</Col>
                <Col span="12">
                <div class="small">
                    <Button class="fr add small-btn" type="primary" :disabled="Status" @click="addZj">新增</Button>
                </div>
                </Col>
            </Row>
            <div>
                <Form ref="jzForm" :model="saveData" :label-width="0" inline>
                    <el-table ref="jzRef" :data="this.saveData.consignmentContainers" class="normal-el-table jzxc">
                        <el-table-column type="index" width="55" label="序号"></el-table-column>
                        <el-table-column :render-header="renderHeaderLabel">
                            <template slot-scope="scope">
                                <FormItem
                                    label
                                    :title="titleJNos"
                                    :prop="'consignmentContainers.'+scope.$index+'.containerNo'"
                                    :rules="jzRules.containerNo[0]"
                                    class="sea-search-box"
                                >
                                    <Input
                                        size="small"
                                        :disabled="Status"
                                        class="required"
                                        :maxlength="15"
                                        v-model="saveData.consignmentContainers[scope.$index].containerNo"
                                    > </Input>
                                </FormItem>
                            </template>
                        </el-table-column>
                        <el-table-column :render-header="renderHeaderSize">
                            <template slot-scope="scope">
                                <FormItem
                                    label
                                    :prop="'consignmentContainers.'+scope.$index+'.containerSize'"
                                    :rules="jzRules.containerSize[0]"
                                >
                                    <RemoteSearch
                                        :disabled="Status"
                                        class="required"
                                        placeholder="请选择"
                                        v-model="saveData.consignmentContainers[scope.$index].containerSize"
                                        :list="containerSizeList"
                                        keywordFiled="name"
                                        valueField="name"
                                        :labelFieldList="['name']"
                                        size="small"
                                    ></RemoteSearch>
                                </FormItem>
                            </template>
                        </el-table-column>
                        <el-table-column :render-header="renderHeaderIndefined">
                            <template slot-scope="scope">
                                <FormItem
                                    label
                                    :prop="'consignmentContainers.'+scope.$index+'.ewIdentification'"
                                    :rules="jzRules.ewIdentification[0]"
                                >
                                    <RemoteSearch
                                        :disabled="Status"
                                        placeholder="请选择"
                                        v-model="saveData.consignmentContainers[scope.$index].ewIdentification"
                                        :list="ewIdentificationList"
                                        keywordFiled="name"
                                        valueField="value"
                                        :labelFieldList="['value','name']"
                                        class="required"
                                        size="small"
                                    ></RemoteSearch>
                                </FormItem>
                            </template>
                        </el-table-column>
                        <el-table-column :render-header="renderHeaderPx">
                            <template slot-scope="scope">
                                <FormItem
                                    label
                                    :title="titleJLcl"
                                    :prop="'consignmentContainers.'+scope.$index+'.lclVotes'"
                                    :rules="jzRules.lclVotes[0]"
                                >
                                    <Input
                                        :disabled="trueValue"
                                        size="small"
                                        :min="minNum"
                                        :maxlength="15"
                                        @on-change="checkCount($event,scope.$index)"
                                        v-model="saveData.consignmentContainers[scope.$index].lclVotes"
                                    />
                                </FormItem>
                            </template>
                        </el-table-column>
                        <el-table-column label="封条号">
                            <template slot-scope="scope">
                                <FormItem label prop="sealNumber">
                                    <Input
                                        :disabled="Status"
                                        size="small"
                                        :maxlength="15"
                                        v-model="scope.row.sealNumber"
                                    />
                                </FormItem>
                            </template>
                        </el-table-column>
                        <el-table-column label="封制类型">
                            <template slot-scope="scope">
                                <FormItem
                                    label
                                    :prop="'consignmentContainers.'+scope.$index+'.agencyType'"
                                    :rules="jzRules.agencyType[0]"
                                >
                                    <RemoteSearch
                                        :disabled="Status"
                                        class="required"
                                        placeholder="请选择"
                                        v-model="saveData.consignmentContainers[scope.$index].agencyType"
                                        :list="agencyTypeList"
                                        keywordFiled="name"
                                        valueField="value"
                                        :labelFieldList="['value','name']"
                                        size="small"
                                    ></RemoteSearch>
                                </FormItem>
                            </template>
                        </el-table-column>
                        <el-table-column label="施封人">
                            <template slot-scope="scope">
                                <FormItem
                                    :prop="'consignmentContainers.'+scope.$index+'.agencyCode'"
                                    :rules="jzRules.agencyCode[0]"
                                >
                                    <RemoteSearch
                                        :disabled="Status"
                                        class="required"
                                        placeholder="请选择"
                                        v-model="saveData.consignmentContainers[scope.$index].agencyCode"
                                        :list="agencyCodeList"
                                        keywordFiled="name"
                                        valueField="value"
                                        :labelFieldList="['value','name']"
                                        size="small"
                                    ></RemoteSearch>
                                </FormItem>
                            </template>
                        </el-table-column>
                        <el-table-column label="箱来源">
                            <template slot-scope="scope">
                                <FormItem
                                    :prop="'consignmentContainers.'+scope.$index+'.containerSources'"
                                    :rules="jzRules.containerSources[0]"
                                >
                                    <RemoteSearch
                                        :disabled="Status"
                                        class="required"
                                        placeholder="请选择"
                                        @keyup.enter.native="addZj(scope.$index, scope.row,'next')"
                                        v-model="saveData.consignmentContainers[scope.$index].containerSources"
                                        :list="containerSourcesList"
                                        keywordFiled="name"
                                        valueField="value"
                                        :labelFieldList="['value','name']"
                                        size="small"
                                    ></RemoteSearch>
                                </FormItem>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sealNumber" label="操作">
                            <template slot-scope="scope">
                                <template>
                                    <i
                                        v-if="!Status"
                                        class="table-icon t-del-icon"
                                        title="删除"
                                        @click="jzDelete(scope.$index, scope.row)"
                                    ></i>
                                </template>
                            </template>
                        </el-table-column>
                    </el-table>
                </Form>
            </div>
            <Row class="sea-title h50">
                <Col span="12">商品信息</Col>
                <Col span="12">
                <div class="small">
                    <Button class="fr add small-btn" type="primary" :disabled="Status" @click="addCar">新增</Button>
                </div>
                </Col>
            </Row>
            <Form ref="carForm" class :model="this.saveData" :label-width="0" inline>
                <el-table ref="carRef" :data="this.saveData.consignmentCargoVos" class="normal-el-table">
                    <el-table-column type="index" width="55" label="序号"></el-table-column>
                    <el-table-column :render-header="renderHeaderCargoLabel">
                        <template slot-scope="scope">
                            <FormItem
                                label
                                :prop="'consignmentCargoVos.'+scope.$index+'.cargoBriefDesc'"
                                :rules="rules.cargoBriefDesc[0]"
                            >
                                <Input
                                    :disabled="Status"
                                    size="small"
                                    class="required"
                                    v-model="saveData.consignmentCargoVos[scope.$index].cargoBriefDesc"
                                />
                            </FormItem>
                        </template>
                    </el-table-column>
                    <el-table-column :render-header="renderHeaderQuantity">
                        <template slot-scope="scope">
                            <FormItem
                                label
                                :title="titleCQuant"
                                :prop="'consignmentCargoVos.'+scope.$index+'.quantity'"
                                :rules="rules.quantity[0]"
                            >
                                <Input
                                    size="small"
                                    :disabled="Status"
                                    :min="minNum"
                                    class="required"
                                    @on-change="checkCounts($event)"
                                    v-model="saveData.consignmentCargoVos[scope.$index].quantity"
                                />
                            </FormItem>
                        </template>
                    </el-table-column>
                    <el-table-column :render-header="renderHeaderCargoPackingType">
                        <template slot-scope="scope">
                            <FormItem
                                label
                                :prop="'consignmentCargoVos.'+scope.$index+'.cargoPackingType'"
                                :rules="rules.cargoPackingType[0]"
                            >
                                <RemoteSearch
                                    class="required"
                                    size="small"
                                    :disabled="Status"
                                    placeholder="请选择"
                                    v-model="saveData.consignmentCargoVos[scope.$index].cargoPackingType"
                                    keyword
                                    :list="packingTypeList"
                                    keywordFiled="dataName"
                                    valueField="dataCode"
                                    :labelFieldList="['dataCode', 'dataName']"
                                ></RemoteSearch>
                            </FormItem>
                        </template>
                    </el-table-column>
                    <el-table-column :render-header="renderHeaderGrossMeasure">
                        <template slot-scope="scope">
                            <FormItem
                                label
                                :title="titleCGross"
                                :prop="'consignmentCargoVos.'+scope.$index+'.grossMeasure'"
                                :rules="rules.grossMeasure[0]"
                            >
                                <Input
                                    size="small"
                                    :disabled="Status"
                                    class="required"
                                    v-model="saveData.consignmentCargoVos[scope.$index].grossMeasure "
                                />
                            </FormItem>
                        </template>
                    </el-table-column>
                    <el-table-column :render-header="renderHeaderMarks">
                        <template slot-scope="scope">
                            <FormItem
                                label
                                :prop="'consignmentCargoVos.'+scope.$index+'.marks'"
                                :rules="rules.marks[0]"
                            >
                                <Input
                                    size="small"
                                    :disabled="Status"
                                    class="required"
                                    v-model="saveData.consignmentCargoVos[scope.$index].marks "
                                />
                            </FormItem>
                        </template>
                    </el-table-column>
                    <el-table-column :render-header="renderHeaderContainerNos">
                        <template slot-scope="scope">
                            <FormItem
                                label
                                :title="titleCNos"
                                class="open"
                                :prop="'consignmentCargoVos.'+scope.$index+'.containerNos'"
                                :rules="rules.containerNos[0]"
                            >
                                <Input
                                    size="small"
                                    ref="nos"
                                    :disabled="Status"
                                    :title="saveData.consignmentCargoVos[scope.$index].containerNos"
                                    class="required nos"
                                    v-model="saveData.consignmentCargoVos[scope.$index].containerNos"
                                >
                                <i slot="append" v-if="!Status" @click="openNos(scope.$index)" class="icon iconfont ok icon-more"></i>
                                <i slot="append" v-else class="icon iconfont dis icon-more"></i>
                                </Input>
                            </FormItem>
                        </template>
                    </el-table-column>
                    <el-table-column :render-header="renderHeaderDangeriousCode">
                        <template slot-scope="scope">
                            <FormItem
                                label
                                :prop="isD==true?'consignmentCargoVos.'+scope.$index+'.dangeriousCode':'consignmentCargoVos.'+scope.$index+'.noDangeriousCode'"
                                :rules="isD==true?rules.dangeriousCode[0]:rules.noDangeriousCode[0]"
                            >
                                <Input
                                    size="small"
                                    :disabled="Status"
                                    @keyup.enter.native="addCar(scope.$index, scope.row,'next')"
                                    :class="isD==true?'required':''"
                                    v-model="saveData.consignmentCargoVos[scope.$index].dangeriousCode "
                                />
                            </FormItem>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sealNumber" label="操作">
                        <template slot-scope="scope">
                            <template>
                                <i
                                    v-if="!Status"
                                    class="table-icon t-del-icon"
                                    title="删除"
                                    @click="carDelete(scope.$index, scope.row)"
                                ></i>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
            </Form>
        </Form>
        <Modal v-model="showDis" @on-ok="okDis" title width="900">
            <openDisChargePort @getValue="setDisChargePort" @getV="hcDis"></openDisChargePort>
        </Modal>
        <div v-if="showCons">
            <Modal v-model="showCons" title width="1000">
                <openConsigneeType name="ce" @getCeValue="setConsigneeType"></openConsigneeType>
            </Modal>
        </div>
        <div v-if="showNot">
            <Modal v-model="showNot" title width="1000">
                <openConsigneeType name="not" @getNotValue="setNotifyCodeType"></openConsigneeType>
            </Modal>
        </div>
        <div v-if="showNos">
            <Modal v-model="showNos" title="箱货关联" width="600" @on-ok="setNosOk">
                <openNos @getValue="setNos" :sdata="nowCarNos" :data="saveData.consignmentContainers"></openNos>
            </Modal>
        </div>
        <printFile ref="printFileRef"></printFile>
        <div v-if="showRecord">
            <Modal
                v-model="showRecord"
                title="海运舱单申报进程"
                width="800"
            >
                <el-table
                    class="record-table"
                    max-height="500"
                    ref="recordTable"
                    :data="recordData"
                    style="width: 100%"
                >
                    <el-table-column
                        type="index"
                        label="序号"
                        width="50"
                    >
                    </el-table-column>
                    <el-table-column
                        property="platCode"
                        label="平台代码"
                        width="120"
                    >
                    </el-table-column>
                    <el-table-column
                        property="messageTimeStr"
                        label="时间"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        property="manifestStatus"
                        label="舱单状态"
                        width="120"
                    >
                        <template slot-scope="scope">
                            <span>{{statusTag[scope.row.manifestStatus]?statusTag[scope.row.manifestStatus]:scope.row.manifestStatus}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        property="responseMessage"
                        label="报文信息"
                        width="290"
                    >
                    </el-table-column>
                </el-table>

            </Modal>
        </div>
    </div>

</template>
<script>
import { mapMutations } from 'vuex'
import printFile from './printFile'
import {
    getSea,
    saveSea,
    getNoticeType,
    sendSea,
    recordSea
} from '@/api/sea'
import RemoteSearch from '@/view/components/RemoteSearch'
import { getBasicData } from '@/api/declare.js'
import openDisChargePort from './openDisChargePort'
import openConsigneeType from './openConsigneeType'
import openNos from './openNos'
import $ from 'jquery'
import formatTime from '@/libs/formatTime'
export default {
    components: {
        RemoteSearch,
        openDisChargePort,
        openConsigneeType,
        openNos,
        printFile
    },
    data () {
        const cM1 = [
            { value: '1', name: '清关' },
            { value: '2', name: '监管仓' },
            { value: '3', name: '水路转关' },
            { value: '4', name: '陆路转关' }
        ]
        const cM2 = [
            { value: '0', name: '[西部]一般贸易' },
            { value: '1', name: '[西部]水路转关' },
            { value: '2', name: '[西部]陆路转关' },
            { value: '3', name: '[西部]加工 ' },
            { value: '4', name: '[西部]保税' },
            { value: '5', name: '[西部]其它' }
        ]
        const vLcl = (rule, value, callback) => {
            callback()
        }
        const vAt = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error())
            }
        }
        const vAc = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error())
            }
        }
        const vCS = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error())
            }
        }
        const vQuantity = (rule, value, callback) => {
            if (!/^\+?[1-9][0-9]*$/.test(value)) {
                this.titleCQuant = '请输入正整数'
                // this.editCarData.quantity = ''
                callback(new Error())
            } else {
                this.titleCQuant = ''
                callback()
            }
        }
        const vGrossMeasure = (rule, value, callback) => {
            if (!/^(\+?[0-9]*)(\.\d{1,4})?$/.test(value)) {
                this.titleCGross = '请输入数字'
                callback(new Error())
            } else {
                this.titleCGross = ''
                callback()
            }
        }
        const vNos = (rule, value, callback) => {
            if (!/^[A-Z]{4}[0-9]{7}$/.test(value)) {
                this.titleJNos = '请输入4个大写字母+7个数字的组合'
                callback(new Error('请输入4个大写字母+7个数字的组合'))
            } else {
                callback()
                this.titleJNos = ''
            }
        }
        const checkNum = (rule, value, callback) => {
            if (value === 0 || value === '0') {
                callback()
            } else {
                if (!/^\+?[1-9][0-9]*$/.test(value)) {
                    callback(new Error())
                } else {
                    callback()
                }
            }
        }
        const checkShippingName = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error())
            }
        }
        const vMark = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error())
            }
        }

        const vEw = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error())
            }
        }
        return {
            cM1: cM1,
            cM2: cM2,
            statusTag: {
                '00': '入库成功',
                '8': '新单',
                '9': '已发送',
                '11': '接收成功',
                '12': '接收失败',
                '21': '平台校验通过',
                '22': '平台校验不通过',
                '31': '已发送船代审核',
                '41': '船代审核通过',
                '42': '船代审核不通过',
                '51': '已发送海关',
                '61': '海关接受申报',
                '62': '海关待人工审核',
                '63': '海关退单',
                '9999': '海关放行'
            },
            ve: {},
            hcd: {},
            noshow: false,
            mtList: [{ value: 'YICT', name: '盐田港' },
                { value: 'DC', name: '大铲湾码头' },
                { value: 'CCT', name: 'CCT码头' },
                { value: 'MCT', name: 'MCT码头' },
                { value: 'MW', name: '妈湾码头' },
                { value: 'SCT', name: 'SCT码头' },
                { value: 'SKP', name: '招港码头' }
            ],
            recordCodeList: { '00': '未查询到舱单', '01': '新增', '02': '改单', '03': '删单', '04': '改船', '99': '用户名或密码错误' },
            recordStatusList: { '00': '未查询到舱单',
                '01': '已上传',
                '02': '已提交,待船代审核',
                '03': '船代审核通过',
                '04': '船代驳回',
                '20': '已发送海关',
                '31': '海关备案成功',
                '32': '海关备案失败',
                '33': '海关人工审核',
                '8': '新单',
                '9': '已发送'
            },
            recordPassList: { '00': '未放行', '01': '已放行' },
            showRecord: false,
            recordData: [{ name: '1', time: '11', address: '112' }],
            nowCarNos: [],
            nowCar: 0,
            Status: false,
            isD: '2',
            isDA: '2',
            noP: true,
            minNum: 0,
            consignorCode: '',
            di: false,
            titleJNos: '',
            titleJLcl: '',
            titleCQuant: '',
            titleCGross: '',
            titleCNos: '',
            ifnotifyName: '',
            ifNotice: false,
            trueValue: true,
            falseValue: false,
            fT: '',
            fList: [],
            old: '',
            tag: 0,
            searchData: {
                containerNo: '',
                dockCode: ''
            },
            no0: false,
            no1: false,
            no2: false,
            no3: false,
            vessel: '',
            seaList: [],
            ynList: [{ name: '否', value: 'N' }, { name: '是', value: 'Y' }],
            agencyTypeList: [{ name: '机械封制', value: 'M' }, { name: '电子封制', value: 'E' }], // 封制类型
            agencyCodeList: [{ name: '拼箱人', value: 'AA' },
                { name: '未知', value: 'AB' },
                { name: '检疫', value: 'AC' },
                { name: '承运人', value: 'CA' },
                { name: '海关', value: 'CU' },
                { name: '发货人', value: 'SH' },
                { name: '码头', value: 'TO' }
            ], // 施封人列表
            containerSourcesList: [{ name: '货主自备箱', value: '1' },
                { name: '承运人提供箱', value: '2' },
                { name: '拼箱人提供箱', value: '3' },
                { name: '拆箱人提供箱', value: '4' },
                { name: '第三方提供箱', value: '5' }
            ], // 箱来源
            saveData: {
                ciId: '',
                noPaper: true,
                taxRebate: 'N', // 是否退税
                billNo: '', // 装船单号
                agencyType: '', // 封制类型
                agencyCode: '', // 施封人
                containerSources: '', // 箱来源
                vessel: '',
                voyageNo: '', // 航次
                imo: '', // imo
                shippingCompany: '', // 船公司
                dischargePort: '', // 卸货港
                cutoffTime: '', // 截关期
                content: '', // 备注
                portSecurityPremium: true,
                manifestId: '',
                containerNo: '',
                dockCode: '', // 码头代码
                bookingNo: '', // 订舱单号
                clearanceMethod: '', // 通关方式
                turnOffInt: '', // 转关单号
                tradeMode: '1234', // 贸易方式
                totalPackageQuantity: '', // 货物总件数
                packingType: '', // 包装种类
                totalGrossMeasure: '', // 货物总毛重
                mainGoodsName: '', // 主要商品名称
                // consignorIdentityType: "USCI", //发货人身份类型
                // consignorCode: "", //发货人代码
                consignorName: '', // 发货人名称
                consignorAddr: '', // 发货人地址
                consignorComminicateType: 'TE', // 发货人通讯方式类别代码
                consignorPhone: '', // 发货人联系号码
                // consigneeEntCodeType: "9999", //收货人企业代码类型
                // consigneeCode: "", //收货人代码
                consigneeName: '', // 收货人名称
                consigneeAddr: '', // 收货人地址
                consigneeComminicateType: 'TE',
                consigneePhone: '', // 收货人电话
                notifyCodeType: '9999', // 通知人企业代码类型
                notifyCode: '', // 通知人代码
                notifyName: '', // 通知人名称
                notifyEmail: '', // 通知人地址
                notifyComminicateType: 'TE', // 通知人通讯方式类别代码
                notifyPhone: '', // 通知人联系号码
                notifyCountryCode: '', // 通知人国家代码
                consigneeCountryCode: '', // 收货人国家代码
                consignorAeoCode: '', // 发货人AEO编码
                consigneeAeoCode: '', // 收货人AEO编码
                isDanger: false, // 是否危险品
                dangercontactName: '', // 危险品联系人名称
                dangercontactPhone: '', // 危险品联系人联系号码
                isDeclareInAdvance: false, // 是否提前申报
                conditionCode: '10', // 运输条款
                consignmentCargoVos: [], // 商品
                consignmentContainers: [], // 集装箱
                freightPaymentMethods: 'CC',
                cargoClearanceStatus: '001',
                loadingPlace: '' // 西部平台需要 装货港
            },
            ruleValidate: {
                shippingCompany: [{ required: true, message: '', trigger: 'blur', validator: checkShippingName }],
                mainGoodsName: [{ required: true, message: '', trigger: 'blur' }],
                vessel: [{ required: true, message: '', trigger: 'change' }],
                dockCode: [{ required: true, message: '', trigger: 'blur' }],
                bookingNo: [{ required: true, message: '', trigger: 'blur' }],
                clearanceMethod: [{ required: true, message: '', trigger: 'blur' }],
                tradeMode: [{ required: true, message: '', trigger: 'blur' }],
                totalPackageQuantity: [
                    { required: true, message: '', trigger: 'blur', validator: checkNum }
                ],
                totalGrossMeasure: [
                    {
                        required: true,
                        message: '',
                        trigger: 'blur',
                        validator: vGrossMeasure
                    }
                ],
                consigneeCountryCode: [
                    { required: true, message: '必填字段', trigger: 'blur' }
                ],
                consignorIdentityType: [
                    { required: false, message: '必填字段', trigger: 'blur' }
                ],
                consignorCode: [
                    {
                        required: false,
                        message: '必填字段',
                        trigger: 'blur'
                    }
                ],
                consignorName: [
                    { required: true, message: '必填字段', trigger: 'blur' }
                ],
                consignorAddr: [
                    { required: true, message: '必填字段', trigger: 'blur' }
                ],
                consignorComminicateType: [
                    { required: true, message: '必填字段', trigger: 'blur' }
                ],
                consignorPhone: [
                    { required: true, message: '必填字段', trigger: 'blur' }
                ],
                consigneeEntCodeType: [
                    { required: true, message: '必填字段', trigger: 'blur' }
                ],
                consigneeName: [
                    { required: true, message: '必填字段', trigger: 'blur' }
                ],
                consigneeAddr: [
                    { required: true, message: '必填字段', trigger: 'blur' }
                ],
                voyageNo: [
                    { required: true, message: '必填字段', trigger: 'blur' }
                ],
                imo: [
                    { required: true, message: '必填字段', trigger: 'blur' }
                ]
            },
            dockList: [
                { value: 'CCT', label: '盐田' },
                { value: 666, label: '蛇口' }
            ],
            clearanceMethodList: [
                { value: '1', name: '清关' },
                { value: '2', name: '监管仓' },
                { value: '3', name: '水路转关' },
                { value: '4', name: '陆路转关' }
            ],
            tradeModeList: [], // 贸易方式
            packingTypeList: [], // 包装
            consignorList: [
                { value: 'USCI', name: '统一信用代码' },
                { value: 'OC', name: '组织代码' },
                { value: 'ID', name: '身份证号' },
                { value: 'PASSPORT', name: '护照号' },
                { value: '8888', name: '身份代码' }
            ], // 发货人列表
            consignorComminicateTypeList: [
                { value: 'TE', name: '电话' },
                { value: 'FX', name: '传真' },
                { value: 'EM', name: '邮件' }
            ],
            trList: [{ value: false, name: '否' }, { value: true, name: '是' }],
            yesList: [{ value: 2, name: '否' }, { value: true, name: '是' }],
            conditionCodeList: [
                { value: '10', name: 'CY-FOR' },
                { value: '27', name: 'door to door' },
                { value: '28', name: 'door to pier' },
                { value: '29', name: 'pier to door ' },
                { value: '30', name: 'pier to pier' },
                { value: '11', name: 'CY-CY' },
                { value: '12', name: 'CU-CFS' },
                { value: '13', name: 'CY-DOOR' },
                { value: '14', name: 'CY-TACKLE ' },
                { value: '15', name: 'CY-RAMP' },
                { value: '16', name: 'CY-FREE OUT ' },
                { value: '18', name: 'CY-LINER OUT' },
                { value: '21', name: 'CFS-CY' },
                { value: '22', name: 'CFS-CFS' },
                { value: '23', name: 'CFS-DOOR' }
            ],
            payList: [{ value: 'CC', name: '到付' }, { value: 'PP', name: '预付' }],
            turnOffDestinationList: [
                { value: 'CNYTN', name: '盐田' },
                { value: 'CNSNZ', name: '深圳' },
                { value: 'CNSHK', name: '蛇口' }
            ],
            cargoClearanceCodeList: [
                { value: '001', name: '进出口货物' },
                { value: '002', name: '国际转运货物' },
                { value: '003', name: '过境货物' },
                { value: '004', name: '空箱' }
            ],
            countryList: [],
            dischargePortList: [],
            dockCodeList: [],
            showDis: false,
            showNot: false,
            showNos: false,
            showCons: false,
            showSeaName: false,
            nowEdit: -1,
            nowCarEdit: -1,
            jzData: [],
            goodsData: [],
            editJzData: {
                containerNo: '',
                containerSize: '',
                ewIdentification: '',
                lclVotes: '',
                agencyType: '', // 封制类型
                agencyCode: '', // 施封人
                containerSources: '' // 箱来源
            },
            editCarData: { containerNos: '' },
            jzlabel: '',
            jzSize: '',
            jsindefined: '',
            jzpx: '',
            containerSizeList: [
                { value: 6, name: '20GP' },
                { value: 7, name: '40GP' },
                { value: 2, name: '40HQ' },
                { value: 3, name: '45HQ' }
            ],
            ewIdentificationList: [
                { value: 5, name: '重箱' },
                { value: 7, name: '拼箱' }
            ],
            ewIdentificationNames: {
                '5': '重箱',
                '7': '拼箱'
            },
            packingTypeNames: {},
            rules: {
                cargoBriefDesc: [
                    { required: true, message: '必填字段', trigger: 'change' }
                ],
                quantity: [
                    {
                        required: true,
                        message: '必填字段',
                        trigger: 'change',
                        validator: vQuantity
                    }
                ],
                cargoPackingType: [
                    { required: true, message: '必填字段', trigger: 'change' }
                ],
                grossMeasure: [
                    {
                        required: true,
                        message: '必填字段',
                        trigger: 'change',
                        validator: vGrossMeasure
                    }
                ],
                marks: [
                    {
                        required: true,
                        message: '必填字段',
                        trigger: 'change',
                        validator: vMark
                    }
                ],
                containerNos: [
                    { required: true, message: '必填字段', trigger: 'change' }
                ], //, validator:vCNos
                dangeriousCode: [
                    { required: true, message: '必填字段', trigger: 'change' }
                ],
                noDangeriousCode: [
                    { required: false, message: '必填字段', trigger: 'change' }
                ]
            },
            jzRules: {
                containerNo: [
                    {
                        required: true,
                        message: '必填字段',
                        trigger: 'change',
                        validator: vNos
                    }
                ],
                containerSize: [
                    { required: true, message: '必填字段', trigger: 'change' }
                ],
                ewIdentification: [
                    {
                        required: true,
                        message: '必填字段',
                        trigger: 'change',
                        validator: vEw
                    }
                ],
                lclVotes: [
                    {
                        required: false,
                        message: '',
                        trigger: 'change',
                        validator: vLcl
                    }
                ],
                agencyType: [
                    {
                        required: true,
                        message: '必填字段',
                        trigger: 'change',
                        validator: vAt
                    }
                ],
                agencyCode: [
                    {
                        required: true,
                        message: '必填字段',
                        trigger: 'change',
                        validator: vAc
                    }
                ],
                containerSources: [
                    {
                        required: true,
                        message: '必填字段',
                        trigger: 'change',
                        validator: vCS
                    }
                ]
            },
            containerNos: []
        }
    },
    created () {
    // 获取贸易方式
        this.getTradeModeList()
        // 包装种类
        this.getPackingTypeList()
        // 国家机构
        this.getCountryList()
        // 卸货港
        // this.getDischargePortList();
        // 码头
        this.getDockCodeList()
    },
    mounted () {
        var h = $
        var that = this
        if (this.$el) {
            $(this.$el).on('keyup', 'input', function (e) {
                if (e.keyCode == 13) {
                    var index = h('input:text').index(h(e.target))
                    that.getInput(index)
                }
            })
        }
        const id = this.$route.params.id
        if (id) {
            this.saveData.manifestId = id
            this.getSeaList()
        }
    },
    watch: {
        'saveData.consigneeName': function (val) {
            if (val) {
                if (val == 'TO ORDER' || val.toUpperCase == 'TO ORDER') {
                    this.saveData.consigneeAddr = 'TO ORDER'
                    this.ifNotice = true
                    this.ifnotifyName = 'notifyName'
                    // 需要增加非必填校验
                } else {
                    this.ifNotice = false
                }
            }
        },
        'saveData.dischargePort' (v) {
            if (v !== this.saveData.consigneeAddr) {
                this.saveData.consigneeAddr = v
            }
        }
    },
    computed: {
    // 计算属性的 getter
    // 货物总件数
        totalPackageQuantity: function () {
            // `this` 指向 vm 实例
            let countArray = this.saveData.consignmentCargoVos.map((a) => { return a.quantity })
            let count = countArray.reduce(function (sum, number) { // sum2 前两个数的和
                return parseInt(sum) + (parseInt(number) || 0)
            }, 0)
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.saveData.totalPackageQuantity = count

            return count
        },
        totalGrossMeasure: function () {
            // `this` 指向 vm 实例
            let countArray = this.saveData.consignmentCargoVos.map((a) => { return a.grossMeasure })
            let count = countArray.reduce(function (sum, number) { // sum2 前两个数的和
                return parseInt(sum) + (parseInt(number) || 0)
            }, 0)
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.saveData.totalGrossMeasure = count

            return count
        },
        mainGoodsName: function () {
            if (this.saveData.consignmentCargoVos[0]) {
                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                this.saveData.mainGoodsName = this.saveData.consignmentCargoVos[0].cargoBriefDesc
            }

            return 'mainGoodsName'
        },
        packingType: function () {
            if (this.saveData.consignmentCargoVos[0]) {
                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                this.saveData.packingType = this.saveData.consignmentCargoVos[0].cargoPackingType
            }

            return 'packingType'
        }

    },
    methods: {
        ...mapMutations(['removeTagNav']),
        okVe () {
            this.setSeaName(this.ve)
        },
        okDis () {
            this.setDisChargePort(this.hcd)
        },
        getTime (time) {
            return formatTime.fullTime(time)
        },
        openRecord () {
            if (this.saveData.manifestId) {
                var obj = { id: this.saveData.consignmentId, pageNum: 1, pageSize: 999 }
                recordSea(obj).then(res => {
                    var su = res.data.success
                    if (su) {
                        this.showRecord = true
                        this.recordData = res.data.data.list
                    } else {
                        this.$Message.error('暂无数据')
                    }
                })
            } else {
                this.$Message.info('请先暂存')
            }
        },
        // 舱单申报退单后，修改后再次发送或申报时提示
        confirmFaild () {
            const consignmentStatus = this.saveData.consignmentStatus
            const failds = ['12', '22', '42', '63']
            return new Promise((resolve, reject) => {
                if (!consignmentStatus || failds.indexOf(consignmentStatus) < 0) {
                    resolve(true)
                } else {
                    this.$Modal.confirm({
                        title: '提示',
                        content: '此舱单将以产生新的提运单号，并以新的提运单号向海关申报，请留意单号变化。是否继续？',
                        onCancel () {
                            resolve(false)
                        },
                        onOk () {
                            resolve(true)
                        }
                    })
                }
            })
        },
        async fsData () {
            const valid = await this.confirmFaild()
            if (!valid) return
            var url = '/customs/manifest/send/shippingManifest?manifestId=' + this.saveData.manifestId + '&opType=20'
            sendSea(url).then(res => {
                var su = res.data.success
                if (su) {
                    this.$Message.success('发送成功')
                    this.saveData.billNo = res.data.data
                    this.getSeaList()
                } else {
                    let arr = res.data.data
                    var mes = ''
                    for (let [index, val] of Object.entries(arr)) {
                        console.log(index, val)
                        mes = mes + (index + ':' + val + '<br/>')
                    }
                    this.$Message.error({ content: mes, duration: 5 })
                }
            })
        },
        async sendData () {
            const valid = await this.confirmFaild()
            if (!valid) return
            var url = '/customs/manifest/send/shippingManifest?manifestId=' + this.saveData.manifestId + '&opType=10'
            sendSea(url).then(res => {
                var su = res.data.success
                if (su) {
                    this.$Message.success('申报成功')
                    this.saveData.billNo = res.data.data
                    this.getSeaList()
                } else {
                    let arr = res.data.data
                    var mes = ''
                    for (let [index, val] of Object.entries(arr)) {
                        mes = mes + (index + ':' + val + '<br/>')
                    }
                    this.$Message.error({ content: mes, duration: 5 })
                }
            })
        },
        handlePrint () {
            this.$refs.printFileRef.init(this.saveData.manifestId)
        },
        // 根据柜号信息反填表单信息
        setFormByContainer (data, kMap) {
            Object.keys(kMap).forEach(k => {
                const v = data[k]
                const attr = kMap[k]
                if (v) {
                    this.saveData[attr] = v
                }
            })
        },
        setNosOk () {
            var nos = this.nowCarNos.map(item => {
                return item.containerNo
            })
            var noString = nos.join(',')
            var num = this.nowCar
            this.saveData.consignmentCargoVos[num].containerNos = noString
            this.showNos = false
        },
        checkCount (event, num) {
            var value = event.target.value
            if (value == 0) {
            } else {
                if (!/^\+?[1-9][0-9]*$/.test(value)) {
                    this.$nextTick(() => {
                        this.saveData.consignmentContainers[num].lclVotes = ''
                    })
                }
            }
        },
        checkCounts (event) {
            var value = event.target.value
            if (!/^\+?[1-9][0-9]*$/.test(value)) {
                this.$nextTick(() => {
                    this.editCarData.quantity = ''
                })
            }
        },
        getTitle (item) {
            if (this.$refs[item].classList.contains('ivu-form-item-error')) {
                return ''
            }
        },
        deepClone (obj) {
            let _obj = JSON.stringify(obj)
            let objClone = JSON.parse(_obj)
            return objClone
        },

        saveCancel () {
            this.$refs.seaForm.resetFields()
        },
        mySetF (val) {
            if (val == 'USCI') {
                this.saveData.consignorComminicateType = 'TE'
            }
        },
        setNos (data) {
            this.nowCarNos = data
        },
        getInput (index) {
            var h = $
            if (index == '49') {
                this.getInput(index + 1)
            } else if (index == '29') {
                this.getInput(index + 4)
            } else if (index == '34' || index == '1') {
                this.getInput(index + 2)
            } else {
                h('input:text')[index + 1].focus()
            }
        },
        getDate (time) {
            this.saveData.cutoffTime = time
        },
        renderHeaderCargoLabel () {
            return (
                <span>
                    <span class="red">*</span>货物描述
                </span>
            )
        },
        renderHeaderQuantity () {
            return (
                <span>
                    <span class="red">*</span>货物件数
                </span>
            )
        },
        renderHeaderCargoPackingType () {
            return (
                <span>
                    <span class="red">*</span>包装
                </span>
            )
        },
        renderHeaderGrossMeasure () {
            return (
                <span>
                    <span class="red">*</span>毛重
                </span>
            )
        },
        renderHeaderMarks () {
            return (
                <span>
                    <span class="red">*</span>唛头
                </span>
            )
        },
        renderHeaderContainerNos () {
            return (
                <span>
                    <span class="red">*</span>集装箱编号
                </span>
            )
        },
        renderHeaderDangeriousCode () {
            if (this.isD == true) {
                return (
                    <span>
                        <span class="red">*</span>危险品编号
                    </span>
                )
            } else {
                return <span>危险品编号</span>
            }
        },

        renderHeaderLabel () {
            return (
                <span>
                    <span class="red">*</span>集装箱编号
                </span>
            )
        },
        renderHeaderSize () {
            return (
                <span>
                    <span class="red">*</span>尺寸
                </span>
            )
        },
        renderHeaderIndefined () {
            return (
                <span>
                    <span class="red">*</span>空重标识
                </span>
            )
        },
        renderHeaderPx () {
            return (
                <span>
          拼箱票数
                </span>
            )
        },
        saveAll () {
            if (!this.shipData) {
                this.shipData = {}
            }
            const keys = this.getManifestKeys()
            keys.forEach(k => {
                this.shipData[k] = this.saveData[k] || ''
            })
            this.shipData.cutoffTime = this.shipData.cutoffTime
                ? formatTime.fullTime(this.shipData.cutoffTime)
                : null // 截关期
            this.shipData.transportType = 1
            if (this.isD == 2) {
                this.saveData.isDanger = false
            } else {
                this.saveData.isDanger = true
            }
            if (this.isDA == 2) {
                this.saveData.isDeclareInAdvance = false
            } else {
                this.saveData.isDeclareInAdvance = true
            }
            if (this.saveData.isDeclareInAdvance == 2) {
                this.saveData.isDeclareInAdvance = false
            }
            if (this.noP == 2) {
                this.saveData.noPaper = false
            } else {
                this.saveData.noPaper = true
            }
            this.shipData.practicalTrainingId = this.$route.params.trainingId

            var obj = {
                consignmentSaveVos: [this.saveData],
                customsManifest: this.shipData
            }
            var that = this
            // if(this.nowCarEdit != '-1'){
            //   this.$Message.error("请保存编辑中的商品信息");

            // }else{

            this.$refs.seaForm.validate(valid => {
                if (valid) {
                    if (
                        !that.saveData.voyageNo ||
            !that.saveData.imo ||
            !that.saveData.dockCode
                    ) {
                        this.$Message.error('船信息请填写完整')
                        return false
                    } else {
                        // success
                        if (this.saveData.consignmentContainers.length == 0) {
                            // success

                            this.$Message.error('请将集装箱信息填写完整')
                        } else {
                            this.$refs.jzForm.validate(valid => {
                                if (valid) {
                                    // success
                                    if (this.saveData.consignmentCargoVos.length == 0) {
                                        // success
                                        this.$Message.error('请将商品信息填写完整')
                                    } else {
                                        this.$refs.carForm.validate(valid => {
                                            if (valid) {
                                                // success
                                                this.tj(obj)
                                            } else {
                                                this.$Message.error('请将商品信息填写完整')
                                            }
                                        })
                                    }
                                } else {
                                    this.$Message.error('请将集装箱信息填写完整')
                                }
                            })
                        }
                    }
                } else {
                    this.$Message.error('请检查红框区域的字段')
                }
            })

            // }
        },
        submitSuccess (id) {
            const oldId = this.$route.params.id
            if (oldId != id) {
                this.removeTagNav(this.$route)
                this.$router.replace({
                    name: 'smftEdit',
                    params: {
                        id
                    }
                })
            } else {
                this.getSeaList()
            }
        },
        tj (obj) {
            saveSea(obj).then(res => {
                var result = res.data
                if (result.success) {
                    this.submitSuccess(result.data.success)
                    this.$Message.success(result.msg)
                } else {
                    this.$Message.error(result.msg)
                }
            })
        },
        cancelAll (index, row) {},
        addZj () {
            this.saveData.consignmentContainers.push({
                containerNo: '',
                containerSize: '',
                ewIdentification: '5',
                lclVotes: '',
                agencyType: 'M', // 封制类型
                agencyCode: 'CA', // 施封人
                containerSources: '2' // 箱来源
            })
            // this.editJzData = {};
            // this.editJzData.ewIdentification = "1";
            // this.editJzData.agencyType = "M";
            // this.editJzData.agencyCode = "AA";
            // this.editJzData.containerSources = "1";
            this.nowEdit = this.saveData.consignmentContainers.length - 1
        },
        jzDelete (index, row) {
            this.saveData.consignmentContainers.splice(index, 1)
            this.nowEdit = -1
        },
        doEdit (index, row) {
            this.$refs.jzForm.validate(valid => {
                if (valid) {
                    if (arguments.length == 3) {
                        this.addZj()
                    } else {
                        this.saveData.consignmentContainers[index] = this.editJzData
                        this.nowEdit = -1
                    }
                } else {
                    this.$Message.error({ content: '请检查红框区域的字段', duration: 5 })
                }
            })
        },
        jzCancel (index, row) {
            this.nowEdit = -1
        },
        addCar () {
            // if(this.nowCarEdit == -1){
            this.saveData.consignmentCargoVos.push({
                marks: 'N/M',
                cargoPackingType: 'CT',
                containerNos: this.saveData.consignmentContainers[0] ? this.saveData.consignmentContainers[0].containerNo : ''
            })
            this.nowCarEdit = this.saveData.consignmentCargoVos.length - 1
            this.editCarData = { containerNos: '', marks: 'N/M' }
            // this.editCarData.marks = 'N/M'
            if (this.containerNos.length > 0) {
                this.editCarData.containerNos = this.containerNos[0].num
            }
        },
        carDelete (index, row) {
            this.saveData.consignmentCargoVos.splice(index, 1)
            this.nowCarEdit = -1
        },
        carEdit (index, row) {
            this.nowCarEdit = index
            this.editCarData = this.deepClone(row)
        },
        doCarEdit (index, row) {
            this.$refs.carForm.validate(valid => {
                if (valid) {
                    // this.editJzData = row;
                    this.saveData.consignmentCargoVos[index] = this.editCarData
                    this.nowCarEdit = -1
                    if (arguments.length == 3) {
                        // this.carEdit();
                        this.addCar()
                    }
                } else {
                    this.$Message.error({ content: '请检查红框区域的字段', duration: 5 })
                }
            })
        },
        carCancel (index, row) {
            this.nowCarEdit = -1
        },
        getManifestKeys () {
            return [
                'loadingPlace',
                'vessel',
                'voyageNo',
                'imo',
                'ciId',
                'dockCode',
                'shippingCompany',
                'dischargePort',
                'cutoffTime',
                'content',
                'manifestNo'
            ]
        },
        getSeaList () {
            var that = this
            getSea({ manifestId: this.saveData.manifestId }).then(res => {
                if (res.data.data.dataPlatCode == 'TZXB') {
                    this.clearanceMethodList = this.cM2
                } else {
                    this.clearanceMethodList = this.cM1
                    this.clearanceMethod = '2'
                }
                var one = res.data.data.consignmentVoList[0]
                if (one) {
                    this.searchData.containerNo = one.consignmentContainers[0] && one.consignmentContainers[0].containerNo || ''
                }
                if (Number(one.totalPackageQuantity) != 0) {
                    one.totalPackageQuantity = one.totalPackageQuantity.toString()
                }
                // }
                one.totalGrossMeasure = one.totalGrossMeasure ? one.totalGrossMeasure.toString() : one.totalGrossMeasure
                that.shipData = res.data.data
                const keys = this.getManifestKeys()
                keys.forEach(k => {
                    one[k] = this.shipData[k] || ''
                })

                if (one.isDanger == false) {
                    that.isD = 2
                } else {
                    that.isD = true
                }
                if (one.isDeclareInAdvance == false) {
                    that.isDA = 2
                } else {
                    that.isDA = true
                }
                if (this.saveData.noPaper == false) {
                    that.noP = 2
                } else {
                    that.noP = true
                }

                if (!one.portSecurityPremium) {
                    one.portSecurityPremium = false
                }
                if (one.containerNos) {
                    var arr = one.containerNos.split(',')
                    that.containerNos = arr.map(item => {
                        return { num: item }
                    })
                } else {
                    that.containerNos = []
                }
                that.saveData = one

                // 根据状态判断是否禁止修改
                that.Status = ['8', '04', '22', '42', '63'].findIndex(sv => sv == one.consignmentStatus) < 0
            })
        },
        setNotifyCodeType (value) {
            this.saveData.notifyCodeType = value
            this.showNot = false
        },
        openNotifyCodeType () {
            this.showNot = true
        },
        setConsigneeType (value) {
            this.saveData.consigneeEntCodeType = value
            this.$refs.seaForm.validateField('consigneeEntCodeType')
            this.showCons = false
            // if('9999' == value){
            //   this.saveData.consigneeComminicateType = '1'
            // }
        },
        openConsignee () {
            this.showCons = true
        },
        openNos (num) {
            this.showNos = true
            this.nowCar = num
            var nosString = this.saveData.consignmentCargoVos[num].containerNos
            if (nosString != null) {
                var nosData = nosString.split(',')
                if (nosData.length > 0) {
                    this.nowCarNos = nosData
                }
            }
        },
        hcDis (dis) {
            this.hcd = dis
        },
        // 打开离境弹窗
        setDisChargePort (value) {
            // this.saveData.dischargePort = value;
            this.saveData.dischargePort = value.dataCode || ''
            this.saveData.consigneeAddr = value.dataName || ''
            // this.$refs.seaForm.validateField('dischargePort')
            // 手动调动校验
            this.showDis = false
        },
        openDischargePort () {
            this.showDis = true
        },
        // 获取码头列表
        getDockCodeList () {
            let data = {
                dataMainType: 'DOCK',
                pageNum: 1,
                pageSize: 10000
            }
            getBasicData(data)
                .then(res => {
                    this.dockCodeList = res.data.data.list
                })
        },
        // 获取国家机构列表
        getCountryList () {
            var obj = {
                dataCode: '',
                dataMainType: 'CONSIGNEE_COUNTRY',
                dataName: '',
                shortName: '',
                id: '',
                keyWord: '',
                pageNum: 1,
                pageSize: 99999
            }
            getNoticeType(obj)
                .then(res => {
                    this.countryList = res.data.data.list
                })
                .catch(err => {
                    // this.getList()
                })
        },
        // 获取包装种类列表
        getPackingTypeList () {
            let data = {
                dataMainType: 'PACKING_TYPE',
                pageNum: 1,
                pageSize: 10000
            }
            getNoticeType(data)
                .then(res => {
                    this.packingTypeList = res.data.data.list
                    for (var i = 0; i < this.packingTypeList.length; i++) {
                        this.packingTypeNames[this.packingTypeList[i].dataCode] = this.packingTypeList[i].dataName
                    }
                })
                .catch(err => {})
        },
        // 获得贸易方式列表
        getTradeModeList () {
            if (this.tradeModeList.length === 0) {
                this.tradeModeList = JSON.parse(localStorage.getItem('TRADE_MODE')) || []
            }
        },
        checkData (data) {
            var flag1 =
        data.imo == this.saveData.imo && data.shipName == this.saveData.vessel
            var flag2 = data.voyageNo == this.saveData.voyageNo
            if (flag1 && flag2) {
                return true
            } else {
                return false
            }
        },
        ifHas (value) {
            var nos = this.saveData.consignmentContainers.map(item => {
                return item.containerNo
            })

            var result = nos.indexOf(value)

            return result
        }
    }
}
</script>
<style lang="less">
.ov{
  height:30px;
  width:150px;
  line-height: 30px;
  overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sea-search-box{
  position:relative
}
.sea-search{
  position:absolute;
  right:5px;
  top:5px;
  cursor:pointer

}
.boxm{
  .box-text{
    display: inline-block;
    width:180px;
    text-align: right;
    margin-right:15px;
  }

}

.el-table td, .el-table th{
  padding:0 0;
}
.el-table thead {
    color: #666;
    }
.record-table{
  border-top:1px solid  #EBEEF5;
  border-left:1px solid  #EBEEF5;
  border-right:1px solid  #EBEEF5;
  .th>.cell{
    font-weight: bolder;

  }
}
.other{
     width: 200px;
     margin-left: 20px;
    a{
      width:100%;
      display:block;
     }
}
.jz-box{
     line-height: 100%;
     button{
     height:20px;
     padding: 0 0;
     line-height: 20px;
     font-size: 12px;
     width:55px;
     margin-left: 10px;
     span{
       display: block;
       height: 18px;
       line-height: 17px;
     }
     }
}
.opera {
     padding:0px 0px 16px 0px;
    button{

     margin-left: 20px;
     text-align: center;
  }
  }
.red {
  color: red;
  vertical-align: middle;
  margin-right: 2px;
}
.sea-content {
  .ivu-form-item {
    width: 100%;
  }
  .ivu-input {
    width: 100%;
  }
  .ivu-date-picker {
    width: 100%;
  }
}
.search-label {
  text-align: right;
  font-size: 12px;
  padding: 1px 1px 2px 0;
  line-height: 18px;
}
.search-select-label {
  padding-left: 5px;
  padding-right: 15px;
}
.sea-content {
  padding:20px 6px;
  background: #fff;
}
.t2 .ivu-input {
  top: 2px;
}
.sea-form {
  .mt-2 {
    margin-top: -1px;
  }
  .ivu-input-number-handler-up-inner,
  .ivu-input-number-handler-down-inner {
    height: 10px;
  }
  .ivu-input-number-small {
    height: 20px;
  }
  .ivu-input-number-small .ivu-input-number-handler {
    height: 10px;

  }h
  .ivu-input-number-small {
    width: 100%;

  }

  .ml20 {
    margin-left: 20px;

  }
  .ivu-input-prefix i,
  .ivu-input-suffix i {
    line-height: 20px;
  }
  .ivu-radio-group {
    line-height: 12px;
  }
  .textr {
    text-align: right;
  }
  .fr {
    float: right;
  }
  .pr {
    position: relative;
  }
  .pa {
    position: absolute;
    left: 0;
    top: 8px;
  }
  .ivu-input-type{
    vertical-align: top;
  }
  .required input {
    background: #faffbd;
  }
  .required input[disabled] {
    background: #f3f3f3;
  }
  .ivu-form-item {
    margin-bottom: 0px;
  }
  .sea-title {
    font-weight: bold;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
  }
  .sea-title.h50 {
    padding-top: 10px;
    height: 40px;
  }
  .ivu-row {
    padding-bottom: 3px;
  }
  .ivu-form-item-label {
    padding: 0px;
    padding-right: 3px;
    line-height: 20px;
  }
  .ivu-form-item-content {
    line-height: 20px;
    input {
      height: 20px;
      line-height: 20px;
      border-radius: 0;
    }
  }
  .ivu-form-item-error-tip {
    display: none;
  }
  .open {
    .ivu-form-item {
      margin-right: 5px;
    }
    .ivu-input-group-append {
      width: 17px;
      height: 15px;
      line-height: 16px;
      color: #fff;
      padding: 1px;

      border-radius: 10px !important ;
      border: 0px;
      left: 5px;
      .dis{
         width: 17px;
         height: 15px;
         line-height: 16px;
         color: #fff;
         padding: 1px;
         background: #ccc;
         border-radius: 10px !important ;
      }
      .ok{
         width: 17px;
         height: 15px;
         line-height: 16px;
         color: #fff;
         padding: 1px;
         border-radius: 10px !important ;
         background: #1177e8;
      }
    }
  }
  .ivu-date-picker {
    padding-right: 0px;
    .ivu-icon-ios-calendar-outline {
      line-height: 20px;
    }
  }
  .red {
    color: red;
  }
  .xred {
    color: red;
    width: 2px !important;
    padding: 0px;
    display: inline-block;
  }

  .small {
    height: 30px;
    .small-btn {
      width: 56px;
      height: 24px;
      line-height: 15px;
      margin-top: 0px;
      text-align: center;
      font-size: 12px;
      padding: 0 0;
    }
  }
}
</style>
